<!DOCTYPE html>
<html lang="en">
<script src="123.js"></script>
<head>
    <meta charset="UTF-8">
    <title>入门</title>
</head>
<body>
    <!--for循环-->
  <div id="app">
      <!--<img v-if="flag" src="js/1.jpg">-->
      <!--列表：无序列表，有序列表-->
      <ul>
          <li v-for="e in arr">{{e}}</li>
      </ul>
      <ol>
          <li v-for="(a,b) in arr">{{a}}::{{b}}</li>
      </ol>
      <ol>
          <li v-for="e in stu">{{e}}</li>
      </ol>
      <ol>
          <li v-for="(value,key) in stu">{{key}}:{{value}}</li>
      </ol>
      <!--在表格中展示表格数组：一行对应一个对象-->
      <table border="1" bordercolor="red" cellspacing="0" width="500">
          <tr v-for="stu in stus">
              <td>{{stu.id}}</td>
              <td>{{stu.name}}</td>
              <td>{{stu.age}}</td>
              <td>{{stu.sex}}</td>
          </tr>
      </table>
  </div>
</body>
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>-->
<script>
  /*js脚本  Vue名称是固定的*/
  new Vue({
    el:"#app",   //指定我们的Vue要管理的区域 el=
    data:{//模型数据
      flag:true,
        arr:["郝宁","郝六","郝五"],
        stu:{
          id:1,
            name:"郝宁",
            age:18,
            sex:"男"
        },
        stus:[
            {
            id:1,
            name:"郝宁",
            age:18,
            sex:"男"},
            {
                id:2,
                name:"郝宁",
                age:18,
                sex:"男"},
            {
                id:3,
                name:"郝宁",
                age:18,
                sex:"男"},
        ]

    },
    methods:{//方法列表
        sayHello(){
            return "HelloWorld"
        },
        a:function (){

        }
    }
  });
</script>
</html>